<template>
  <div class="page-container">
    <h3>侦听器基本使用</h3>
    <input type="text" v-model="name" />
    <hr />
  </div>
</template>

<script>
export default {
  name: "Watch1",
  data() {
    return {
      name: "",
    };
  },
  // 所有侦听器都应该被定义到watch节点下
  watch: {
    // 侦听器本质是一个函数，要监听哪个数据变化，就把数据名作为方法名即可
    // 第一个参数是新值，第二个参数是旧值
    name(newVal, oldVal) {
      console.log("新值====>", newVal);
      console.log("旧值====>", oldVal);
    },
  },
};
</script>
